﻿@using RunCoachWebApplication.Models;
@using RunCoachWebApplication.RunCoachServiceReference;

@model RunCoachWebApplication.Controllers.ActivityController.ActivityParameter

@{
    ViewBag.Title = "An Activity";
}


<h2>@ViewBag.Title</h2>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // If the browser supports the Geolocation API
        if (typeof navigator.geolocation == "undefined") {
            $("#error").text("Your browser doesn't support the Geolocation API");
            return;
        }
        // Save the positions' history
        var path = [];
                    
        @foreach (var place in Model.coos)
        {
            <text>
            path.push(new google.maps.LatLng(
              parseFloat(@place.Lat),
              parseFloat(@place.Lon)
            ));
        </text>
        }

        navigator.geolocation.watchPosition(function (position) {
            // Save the current position
            //path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

            // Create the map
            var myOptions = {
                zoom: 16,
                center: path[0],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            /*
            Uncomment this block if you want to set a path
            
            // Create the polyline's points

            for (var i = 0; i < 5; i++) {
                // Create a random point using the user current position and a random generated number.
                // The number will be once positive and once negative using based on the parity of i
                // and to reduce the range the number is divided by 10
                path.push(
                  new google.maps.LatLng(
                    position.coords.latitude + (Math.random() / 10 * ((i % 2) ? 1 : -1)),
                    position.coords.longitude + (Math.random() / 10 * ((i % 2) ? 1 : -1))
                  )
                );
            }
            */

            // Create the array that will be used to fit the view to the points range and
            // place the markers to the polyline's points
            var latLngBounds = new google.maps.LatLngBounds();
            for (var i = 0; i < path.length; i++) {
                latLngBounds.extend(path[i]);
                // Place the marker
                new google.maps.Marker({
                    map: map,
                    position: path[i],
                    title: "Point " + (i + 1)
                });
            }
            // Creates the polyline object
            var polyline = new google.maps.Polyline({
                map: map,
                path: path,
                strokeColor: '#0000FF',
                strokeOpacity: 0.7,
                strokeWeight: 1
            });
            // Fit the bounds of the generated points
            map.fitBounds(latLngBounds);
        },
        function (positionError) {
            $("#error").append("Error: " + positionError.message + "<br />");
        },
        {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
        });
    });
</script>

<div id="map" style="width: 700px; height: 500px"></div>

<br /><br />

<table>
    <tr>
        <th>Start Time</th>
        <td>@Model.run.start_time.ToString()</td>
    </tr>
    <tr>
        <th>End Time</th>
        <td>@Model.run.end_time.ToString()</td>
    </tr>
    <tr>
        <th>Distance</th>
        <td>@Model.run.distance.ToString() km</td>
    </tr>
    <tr>
        <th>Avg Speed</th>
        <td>@Model.run.avg_speed.ToString() min/km</td>
    </tr>

</table>

